<template>
    <div id='wrap'>
      <h1>组件事件emit</h1>
      <scu8 :user msg="放假30天" @sonEmit="emitHandler"></scu8>
      <hr>
      <scu10 :user msg="放假30天" 
      @sonEmit="emitHandler" 
      @sonEmit2="emitHandler2" 
      @event1="handlesonEmit1" 
      @event2="handlesonEmit2"></scu10>
      <hr>
    </div>
  </template>
  
  <script lang='ts'>
  export default {
    name: 'scu18',
  }
  </script>
  
  <script lang='ts' setup>
  import { ref } from 'vue'
  import scu8 from "./component/scu8.vue";
  import scu10 from "./component/scu10.vue";
  import {type Iuser} from "./component/scu8.vue";
  const user=ref<Iuser>({
      name:'小米',
      age:18,
      sex:'女'
  })
  const emitHandler=(p1:number,p2:string,p3:{name:string})=>{
    console.log('此函数是由子组件使用emit触发调用',p1,p2,p3);
  }
  const emitHandler2=()=>{
    console.log('@sont-emit2="handlesonEmit2"');
  }
  function handlesonEmit1(data:string){
     console.log(data);
     
  }
  const handlesonEmit2=(data:string)=>{
    console.log(data);
  }
  </script>
  
  <style scoped lang='scss'>
  
  </style>